<template>
  <div>
    <el-row>
      <el-col :span=20 :offset="2" style="margin-bottom: 30px">

        <el-menu mode="horizontal">
          <el-menu-item>
            <el-button @click="chooseClassVisible=true">选择管理的教学班</el-button>
          </el-menu-item>
          <el-menu-item v-if="isSelectReady">
            已选择的教学班 : {{
              chosenClass.course_name + ' ' +
              chosenClass.year + ' ' +
              chosenClass.semester + ' ' +
              chosenClass.schedule
            }}
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <div class="dialogSection">
      <el-dialog
        title="选择管理的教学班"
        :visible.sync="chooseClassVisible"
        width="30%"
        center
        destroy-on-close
      >
        <el-select v-model="chosenClass"
                   :value-key="chosenInfo" placeholder="请选择要管理的课程" @change="handleClassChange">
          <el-option
            v-for="item in classes"
            :key="item.course_name"
            :label="item.course_name+' '+item.year+' '+item.semester+' '+item.schedule"
            :value="item">
          </el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelChoose">取 消</el-button>
<!--          <el-button type="primary" @click="confirmChooseClass">确 定</el-button>-->
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import tc from "../../../store/teacher";

export default {
  name: "ClassSelector",
  computed:{
    classes(){
      return tc.getters.getClasses
    },
    chosenClass:{
      get(){
        return tc.getters.getChosenClass
      },
      set(v){
        tc.commit('setChosenClass',v)
      }
    },
    isSelectReady:{
      get(){return tc.getters.getIsSelectReady},
      set(v){tc.commit('setIsSelectReady',v)}

    }
  },
  data() {
    return {
      chooseClassVisible:false,
      chosenInfo:'',


    }
  },
  methods:{
    handleClassChange(chosen) {
      // axios.post('/api/showAllCoursewares', qs.stringify({courseId: chosen.courseId})).then(res1 => {
      //
      //   this.coursewareList = res1.data.coursewareList
      //   console.log(this.coursewareList)
      // })
      this.isSelectReady = true
      this.chooseClassVisible = false
    },
    confirmChooseClass() {

      this.isSelectReady = true
      this.chooseClassVisible = false

    },
    cancelChoose() {
      this.chooseClassVisible = false
    },
  }
}
</script>

<style scoped>

</style>
